<template>
  <div class="header flex-between flex-align-items-center">
    <div class="nav flex flex-align-items-center">
      <template v-for="(item, index) in route.meta.nav">
        <i v-if="index > 0">/</i>
        <span class="font-14">{{ item }}</span>
      </template>
    </div>
    <div class="header-right flex flex-align-items-center">
      <p class="home-page pointer flex-center flex-align-items-center" @click="toPath('/')">
        <i class="iconfont icon-shouye"></i>
        <span class="font-14">首页</span>
      </p>
      <div class="icons flex flex-align-items-center">
        <div class="icons-item flex-center flex-align-items-center pointer">
          <i class="iconfont icon-kefu"></i>
        </div>
        <el-popover placement="bottom-end" :width="360" trigger="hover" :show-arrow="false">
          <template #reference>
            <div class="icons-item flex-center flex-align-items-center pointer">
              <i class="iconfont icon-notice"></i>
            </div>
          </template>
          <div class="notice-popup">
            <div class="notice-top flex-between flex-align-items-center">
              <div class="font-16-B">消息通知</div>
              <p class="font-14 pointer" @click="toPath('/noticeList')">查看全部</p>
            </div>
            <div class="notice-main">
              <div v-if="noticeList.length === 0" class="no-data flex-center flex-column flex-align-items-center">
                <img src="@/assets/default-1.png">
                <p class="font-12">暂无消息</p>
              </div>
              <div v-for="item in noticeList" :key="item.id" class="notice-item pointer" @click="openNoticeDetail(item)">
                <div class="flex-between">
                  <p class="nitice-name font-14 ellipsis-1">{{ item.name }}</p>
                  <p class="notice-time font-12">{{ item.time }}</p>
                </div>
                <p class="notice-content font-12 ellipsis-2">{{ item.content }}</p>
              </div>
            </div>
            <div class="notice-bottom flex">
              <p class="font-14 pointer">一键已读</p>
            </div>
          </div>
        </el-popover>
        <!-- <el-popover placement="bottom" :width="198" trigger="hover">
          <template #reference>
            <div class="icons-item flex-center flex-align-items-center pointer">
              <i class="iconfont icon-erweima"></i>
            </div>
          </template>
          <div class="qr-popup pointer">
            <img src="@/assets/qr-wechat.jpg">
            <p class="font-12">扫码关注公众号</p>
          </div>
        </el-popover> -->
        <el-popover v-if="userInfo" placement="bottom-end" :width="176" trigger="hover" :show-arrow="false" effect="dark">
          <template #reference>
            <div class="user-info flex flex-align-items-center">
              <img src="@/assets/avatar.png" class="pointer">
              <span class="font-14">{{ userInfo.name }}</span>
            </div>
          </template>
          <div class="personal-popup">
            <div class="personal-top">
              <p class="font-14-B">{{ userInfo.name }}</p>
              <div class="flex flex-align-items-center">
                <img src="@/assets/icon-member1.png">
                <span class="font-12">{{ userInfo.member }}</span>
              </div>
            </div>
            <div class="personal-main">
              <p v-for="(item, index) in personalMenus" :key="index" class="pointer font-14"
                @click="index === 4 ? logout() : toPath(item.path)">{{
                  item.name }}</p>
            </div>
          </div>
        </el-popover>
      </div>
    </div>
  </div>

  <notice-detail v-if="noticeDetail.show" :id="noticeDetail.id" @close="noticeDetail.show = false"></notice-detail>
</template>

<script setup>
import NoticeDetail from '@/components/noticeDetail.vue';
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
import api from '@/api/index.js';

const router = useRouter();
const route = useRoute();
const store = useStore();

const personalMenus = [
  {
    name: '团队管理',
    path: '/teamManage'
  },
  {
    name: '访问官网',
    path: '2'
  },
  {
    name: '教程指引'
  },
  {
    name: '意见反馈',
    path: '3'
  },
  {
    name: '退出登陆'
  }
]

const userInfo = ref(store.state.userInfo);
const noticeDetail = ref({
  show: false,
  id: null
});

const noticeList = ref([
  {
    id: 1,
    name: '标题',
    content: '内容内容内容内容内容内容内容内容内容内容内容内容',
    time: '2023-12-11'
  }
]);

// 跳转登录页
const toPath = path => {
  if (path) {
    router.push(path);
  }
}
// 退出登录
const logout = () => {
  api.login.logout().then(() => {
    store.commit('userInfoChange', null);
    store.commit('tokenChange', null);
    localStorage.clear();
    userInfo.value = null;
    router.push('/login');
  });
}
// 打开通知详情
const openNoticeDetail = item => {
  noticeDetail.value = {
    show: true,
    id: item.id
  }
}
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  width: 100%;
  height: 64px;
  background: #fff;
  padding: 0 16px 0 248px;
}

.nav {
  span {
    color: #606266;

    &:first-child {
      color: #606266 !important;
    }

    &:last-child {
      color: @main-color;
    }
  }

  i {
    font-weight: bold;
    color: #c0c4cc;
    margin: 0 9px;
  }
}

.header-right {
  .home-page {
    width: 80px;
    height: 32px;
    background: #f752761a;
    border-radius: 16px;
    margin-right: 24px;

    i {
      color: @main-color;
      margin-right: 4px;
    }

    span {
      color: @main-color;
    }
  }

  .icons {
    .icons-item {
      width: 32px;
      height: 32px;
      border: 1px solid #f7f2f4;
      border-radius: 50%;
      margin-right: 16px;

      i {
        color: #333;
      }
    }

    .user-info {
      img {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        margin-right: 8px;
      }

      span {
        color: #333;
      }
    }
  }
}

.notice-popup {
  padding: 16px;

  .notice-top {
    padding-bottom: 16px;
    border-bottom: 1px solid #ebedf0;
    line-height: 30px;

    div {
      color: #333;
    }

    p {
      color: @main-color;
    }
  }

  .notice-main {
    padding-top: 16px;

    .no-data {
      height: 290px;

      img {
        height: 60px;
        height: 60px;
        margin-bottom: 24px;
      }

      p {
        color: #cecece;
      }
    }

    .notice-item {
      padding-bottom: 16px;
      margin-bottom: 16px;
      border-bottom: 1px solid #ebedf0;

      .notice-name {
        position: relative;
        padding-left: 18px;
        width: 218px;
        color: #333;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 5px;
          width: 10px;
          height: 10px;
          border-radius: 5px;
          border: 2px solid #999;
        }
      }

      .notice-time {
        color: #666;
      }

      .notice-content {
        color: #666;
        margin-top: 6px;
      }
    }
  }

  .notice-bottom {
    justify-content: end;

    p {
      color: @main-color;
      border-bottom: 1px solid @main-color;
    }
  }
}

.qr-popup {
  padding: 24px 0;
  text-align: center;

  img {
    width: 120px;
    height: 120px;
    margin-bottom: 8px;
  }

  p {
    color: @main-color;
  }
}

.personal-popup {
  padding: 14px 14px 9px;
  background: #fff;

  .personal-top {
    margin-bottom: 8px;

    p {
      color: #333;
      margin-bottom: 8px;
    }

    div {
      padding-bottom: 14px;
      border-bottom: 1px solid #ededed;

      img {
        width: 14px;
        height: 14px;
        margin-right: 6px;
      }

      span {
        color: #999;
      }
    }
  }

  .personal-main {
    p {
      padding: 0 8px;
      margin-bottom: 4px;
      color: #666;
      line-height: 32px;
      border-radius: 2px;

      &:hover {
        background: #ffeef3d9;
      }

      &:nth-child(4) {
        margin-bottom: 8px;
      }

      &:last-child {
        border-top: 1px solid #ededed;
      }
    }
  }
}
</style>
